<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table {
            width: 600px;
            text-align: center;
            border-bottom: solid 2px #DDD;
            /* 合并边框 */
            border-collapse: collapse;
        }

        td,
        th {
            border-bottom: solid 1px #DDD;
            height: 40px;
        }
    </style>
</head>

<body>
    <h3>用户信息</h3>
    <table>
        <tr>
            <th>用户编号</th>
            <th>用户姓名</th>
            <th>用户性别</th>
            <th>用户年龄</th>
        </tr>
        <tbody id="userBox">
            <!-- 这里是动态内容 -->
        </tbody>
    </table>
    <script>
        let userArr = [{
            userId: 1,
            userName: '张三',
            userSex: '男',
            userAge: 20
        }, {
            userId: 2,
            userName: '李四',
            userSex: '女',
            userAge: 21
        }, {
            userId: 3,
            userName: '王五',
            userSex: '男',
            userAge: 22
        }]
        let userBox = document.getElementById('userBox');
        let str = '';
        for (let i = 0; i < userArr.length; i++) {
            str += '<tr>' +
                '<td>' + userArr[i].userId + '</td>' +
                '<td>' + userArr[i].userName + '</td>' +
                '<td>' + userArr[i].userSex + '</td>' +
                '<td>' + userArr[i].userAge + '</td>' +
                '</tr>';
        }
        userBox.innerHTML = str;
    </script>
</body>

</html>